<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>主页</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<style>

img {
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

.layui-top-box {
	padding: 2px 15px 2px 15px;
	color: #000
}

.panel {
	margin-bottom: 17px;
	background-color: #fff;
	border: 1px solid transparent;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
}

.panel-body {
	padding: 10px
}

.panel-title {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 14px;
	color: inherit
}

.label {
	display: inline;
	padding: .2em .6em .3em;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: .25em;
	margin-top: .3em;
}

.layui-red {
	color: red
}

.main_btn>p {
	height: 40px;
}

.pull-right {
	float: right;
}

 table {
    border-collapse: separate;
    border-spacing: 10px; /* 设置表格边框间距 */
    width: 100%;
  }
  
  td {
    padding: 3px; /* 设置单元格内间距 */
  }
  
</style>
<body>
	<div class="layuimini-container">
		<div class="layuimini-main layui-top-box">
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md4">
					<div class="col-xs-6 col-md-3">
						<div class="panel layui-bg-blue" style="background-color: blue;">
							<div class="panel-body">
								<div class="panel-title">
									<!-- <span class="label pull-right layui-bg-cyan">实时</span> -->
									<h5>加油站</h5>
								</div>
								<div class="panel-content">
									<h2 id="h2_1" class="no-margins">0</h2>
									<div class="stat-percent font-bold text-gray">
										<i class="fa fa-commenting"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- <div class="layui-col-md2">
					<div class="col-xs-6 col-md-3">
						<div class="panel layui-bg-green" style="background-color: green;">
							<div class="panel-body">
								<div class="panel-title">
									<span class="label pull-right layui-bg-cyan">实时</span>
									<h5>本月金额</h5>
								</div>
								<div class="panel-content">
									<h2 id="h2_2" class="no-margins"></h2>
									<div class="stat-percent font-bold text-gray">
										<i class="fa fa-commenting"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div> -->
				
				<div class="layui-col-md4">
					<div class="col-xs-6 col-md-3">
						<div class="panel layui-bg-green" style="background-color: green;">
							<div class="panel-body">
								<div class="panel-title">
									<!-- <span class="label pull-right layui-bg-cyan">实时</span> -->
									<h5>汽油</h5>
								</div>
								<div class="panel-content">
									<h2 id="h2_3" class="no-margins">0</h2>
									<div class="stat-percent font-bold text-gray">
										<i class="fa fa-commenting"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="layui-col-md4">
					<div class="col-xs-6 col-md-3">
						<div class="panel layui-bg-blue" style="background-color: blue;">
							<div class="panel-body">
								<div class="panel-title">
									<!-- <span class="label pull-right layui-bg-cyan">实时</span> -->
									<h5>柴油</h5>
								</div>
								<div class="panel-content">
									<h2 id="h2_4" class="no-margins">0</h2>
									<div class="stat-percent font-bold text-gray">
										<i class="fa fa-commenting"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>

			<div class="layui-row layui-col-space10">
				<!-- <div class="layui-col-md2">
					<div class="col-xs-6 col-md-3">
						<div class="panel layui-bg-yellow"
							style="background-color: yellow;">
							<div class="panel-body">
								<div class="panel-title">
									<span class="label pull-right layui-bg-cyan">实时</span>
									<h5>本月油量</h5>
								</div>
								<div class="panel-content">
									<h2 id="h2_7" class="no-margins">0</h2>
									<div class="stat-percent font-bold text-gray">
										<i class="fa fa-commenting"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div> -->

				<!-- <div class="layui-col-md2">
					<div class="col-xs-6 col-md-3">
						<div class="panel layui-bg-red" style="background-color: red;">
							<div class="panel-body">
								<div class="panel-title">
									<span class="label pull-right layui-bg-cyan">实时</span>
									<h5>今日油价</h5>
								</div>
								<div class="panel-content">
									<h2 id="h2_8" class="no-margins">0</h2>
									<div class="stat-percent font-bold text-gray">
										<i class="fa fa-commenting"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div> -->
				
				<!-- <div class="layui-col-md2">
					<div class="col-xs-6 col-md-3">
						<div class="panel layui-bg-yellow"
							style="background-color: yellow;">
							<div class="panel-body">
								<div class="panel-title">
									<span class="label pull-right layui-bg-cyan">实时</span>
									<h5>98号</h5>
								</div>
								<div class="panel-content">
									<h2 id="h2_9" class="no-margins">43</h2>
									<div class="stat-percent font-bold text-gray">
										<i class="fa fa-commenting"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div> -->
				
				<!-- <div class="layui-col-md2">
					<div class="col-xs-6 col-md-3">
						<div class="panel layui-bg-red" style="background-color: red;">
							<div class="panel-body">
								<div class="panel-title">
									<span class="label pull-right layui-bg-cyan">实时</span>
									<h5>0号</h5>
								</div>
								<div class="panel-content">
									<h2 id="h2_10" class="no-margins">0</h2>
									<div class="stat-percent font-bold text-gray">
										<i class="fa fa-commenting"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div> -->
				
				
				<div class="layui-col-md3">
					<div class="col-xs-6 col-md-3">
						<div class="panel layui-bg-blue" style="background-color: blue;">
							<div class="panel-body">
								<div class="panel-title">
									<!-- <span class="label pull-right layui-bg-cyan">实时</span> -->
									<h5>所有摄像头</h5>
								</div>
								<div class="panel-content">
									<h2 id="h2_5" class="no-margins">0</h2>
									<div class="stat-percent font-bold text-gray">
										<i class="fa fa-commenting"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>


				<div class="layui-col-md3">
					<div class="col-xs-6 col-md-3">
						<div class="panel layui-bg-green" style="background-color: green;">
							<div class="panel-body">
								<div class="panel-title">
									<!-- <span class="label pull-right layui-bg-cyan">实时</span> -->
									<h5>在线摄像头</h5>
								</div>
								<div class="panel-content">
									<h2 id="h2_6" class="no-margins">0</h2>
									<div class="stat-percent font-bold text-gray">
										<i class="fa fa-commenting"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="layui-col-md3">
					<div class="col-xs-6 col-md-3">
						<div class="panel layui-bg-blue" style="background-color: blue;">
							<div class="panel-body">
								<div class="panel-title">
									<!-- <span class="label pull-right layui-bg-cyan">实时</span> -->
									<h5>异常摄像头</h5>
								</div>
								<div class="panel-content">
									<h2 id="h2_11" class="no-margins">0</h2>
									<div class="stat-percent font-bold text-gray">
										<i class="fa fa-commenting"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>


				<div class="layui-col-md3">
					<div class="col-xs-6 col-md-3">
						<div class="panel layui-bg-red" style="background-color: red;">
							<div class="panel-body">
								<div class="panel-title">
									<!-- <span class="label pull-right layui-bg-cyan">实时</span> -->
									<h5>本月销售额</h5>
								</div>
								<div class="panel-content">
									<h2 id="h2_12" class="no-margins">0</h2>
									<div class="stat-percent font-bold text-gray">
										<i class="fa fa-commenting"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
			</div>


		</div>



		<div class="layuimini-main layui-top-box">

			<div class="layui-row layui-col-space10">
				<div class="layui-col-md7">
					<!-- <img alt="" src="/images/main1.png"> -->
					<div>
						<!-- <span onclick="loadEcharts(3)" id="echartsSpan3" style="border:1px solid #00F;font-size: 10px;float: right;background-color: white; color: black;padding: 2px 3px;text-align: center; cursor: pointer;border-radius: 1px;"></span> -->
						<span onclick="loadEcharts(2)" id="echartsSpan2" style="border:1px solid #00F;font-size: 10px;float: right;background-color: white; color: black;padding: 2px 3px;text-align: center; cursor: pointer;border-radius: 1px;">申报额</span>
						<span onclick="loadEcharts(1)" id="echartsSpan1" style="border:1px solid #00F;font-size: 10px;float: right;background-color: white; color: black;padding: 2px 3px;text-align: center; cursor: pointer;border-radius: 1px;">销售额</span>
						<span onclick="loadEcharts(0)" id="echartsSpan0" style="border:1px solid #00F;font-size: 10px;float: right;background-color: blue; color: white;padding: 2px 3px;text-align: center; cursor: pointer;border-radius: 1px;">车流统计</span>
					</div>
					<br>
					<div id="main" style="width: 700px;height:300px;"></div>
				</div>

				<div class="layui-col-md5">
					<!-- <img alt="" src="/images/main2.png"> -->
					<div>
						<div>
							<span style="float: left; font-weight:bold; font-size:20px ">实时车流记录</span>
							<span onclick="skipOpen('/index/gas/staytime','10303','车流记录')" style="float: right;background-color: blue; color: white;padding: 2px 3px;text-align: center; cursor: pointer;border-radius: 6px;">更多数据</span>
						</div>
						<br>
						<br>
						<div id="tableDiv">
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>


	<script src="/layui/layui.all.js" charset="utf-8"></script>
	<script src="/js/jquery.min.js"></script>
	<script src="/js/core.util.js"></script>
	<script src="/js/echarts.min.js"></script>

	<script>
		
		(function() {
			loadEcharts(0);
			
			var h2data = {};
			CoreUtil.sendPost("/gas/homemain/h2data", h2data, function (res) {
				//初始化渲染数据
				
				if (!CoreUtil.isEmpty(res.data)) {
					var list = res.data;
					$("#h2_1").html(list[0]);
					$("#h2_2").html(list[1]);
					$("#h2_3").html(list[2]);
					$("#h2_4").html(list[3]);
					$("#h2_5").html(list[4]);
					$("#h2_6").html(list[5]);
					$("#h2_7").html(list[6]);
					$("#h2_8").html(list[7]);
					$("#h2_9").html(list[8]);
					$("#h2_10").html(list[9]);
					$("#h2_11").html(list[10]);
					$("#h2_12").html(list[11]);
					
				}
			});
			
			var tableParams = {
				page: 1,
				limit: 10
			};
			CoreUtil.sendPost("/gas/homemain/staytimeTop", tableParams, function (res) {
				//初始化渲染数据
				if (res.data != null && res.data.records != null) {
						var list = res.data.records;
						var tableContent = "";
						if(list.length > 0){
							tableContent += "<table style='min-width: 100%;'>";
							for(var i in list){
								var time = list[i].time;
								
								var messageAreaname = list[i].messageAreaname;
								
								var station = list[i].station;
								
								var messageRulename = list[i].messageRulename;
								var messageMsegtype = list[i].messageMsegtype;
								
								var oils = list[i].oils;
								
								
								var image = list[i].image;
								tableContent += "<tr>"
									+"<td style='width: 25px;font-size: 11px;padding:0px'>"+time+"</td>"
									+"<td style='font-size: 11px;padding:0px'>"+station+"</td>"
									+"<td style='width: 25px;font-size: 11px;padding:0px'>"+oils+"</td>"
									// +"<td>"+messageMsegtype+"</td>"
									+"<td data-src='"+image+"' onclick='showImage(this)' style='width: 25px;color: blue;cursor: pointer;font-size: 11px;padding:0px'>查看</td>"
									+"</tr>";
							}
							tableContent += "</table>";
						}else{
							tableContent = "<span>暂无数据... ...</span>";
						}
						
						$("#tableDiv").html(tableContent);
						
			        }
				});
		 })();
		
		
		
		
		
		function showImage(obj) {
			var src = $(obj).attr('data-src'); // 获取图片地址
			layer.open({
				type: 1,
			    title: false,
			    closeBtn: 0,
			    area: '500px',
			    skin: 'layui-layer-nobg', // 没有背景色的弹层
			    shadeClose: true,
			    content: '<img src="' + src + '" alt="图片" style="margin: auto; max-width: 100%; max-height: 100%">'
			  });
		};
		   
		
		function skipOpen(gnurl,gnid,title){
			if(CoreUtil.isEmpty(gnurl) || CoreUtil.isEmpty(gnid) || CoreUtil.isEmpty(title)){
				
				return false;
			}else{
				var gnurlArr = gnurl.split(",");
				var gnidArr = gnid.split(",");
				var titleArr = title.split(",");
				for (var i in gnurlArr) {
					skipExecute(gnurlArr[i],gnidArr[i],titleArr[i])
				}
			}
		}
		
		function skipExecute(gnurl,gnid,title){
			if ($(".layui-tab-title li[lay-id]").length <= 0) {
				
				var title = "<span>"+title+"</span>";
			    active.tabAdd(gnurl,gnid,title);
				
			} else {
				var isData = false;
				$.each($(".layui-tab-title li[lay-id]"),
					function() {
						if ($(this).attr("lay-id") == dataid.attr("data-id")) {
							isData = true;
						}
				})
				
				if (isData == false) {
					if (CoreUtil.isEmpty(dataid
							.attr("data-icon"))) {
						var title = "<span>"
								+ dataid.attr("data-title")
								+ "</span>";
						active.tabAdd(dataid.attr("data-url"),
								dataid.attr("data-id"), title);
					} else {
						var title = "<span>"
								+ dataid.attr("data-title")
								+ "</span>";
						title = '<i class="layui-icon '
								+ dataid.attr("data-icon")
								+ '"></i> ' + title;
						active.tabAdd(dataid.attr("data-url"),
								dataid.attr("data-id"), title);
					}
				}
			};
			
			active.tabChange(gnid);
		};	
		
		
		//触发事件
		var active = {
			tabAdd : function(url, id, title) {
				if (url != "" && url != null && url != undefined) {
					window.parent.layui.element
							.tabAdd(
									'tab',
									{
										title : title,
										content : '<iframe data-frameid="'
												+ id
												+ '" frameborder="0" name="content" width="100%" src="'
												+ url + '"></iframe>',
										id : id
									})
				}
				FrameWH();//计算框架高度
			},
			tabChange : function(id) {
				//切换到指定Tab项
				window.parent.layui.element.tabChange('tab', id); //切换到：用户管理
				$("iframe[data-frameid='" + id + "']").attr("src",
						$("iframe[data-frameid='" + id + "']").attr("src"))//切换后刷新框架
			},
		};
		
		
		function FrameWH() {
			var h = $(window).height();
			$(window.parent.document).find("iframe").css("height", h + "px");
		};
		
		function loadEcharts(id){
			
			// 初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			if(id == 0){
				$("#echartsSpan0").css("background-color","blue");
				$("#echartsSpan0").css("color","white");
				$("#echartsSpan1").css("background-color","white");
				$("#echartsSpan1").css("color","black");
				$("#echartsSpan2").css("background-color","white");
				$("#echartsSpan2").css("color","black");
				$("#echartsSpan3").css("background-color","white");
				$("#echartsSpan3").css("color","black");
				
				CoreUtil.sendPost("/gas/homemain/staytimeGroupYearMonth", null, function (res) {
					if (res.code == '0') {
						var _data = res.data;
						var data0 = _data[0];
	        			var data1 = _data[1];
	        			var xAxisData = _data[2];
	        			var titleText = _data[3];
	        			
	        			if(CoreUtil.isEmpty(data0) && CoreUtil.isEmpty(data1)){
	        				layer.msg(titleText + "暂无数据！");
	        				return false;
	        			}
	        			
	        			
						var option = {
				               title: {
				                   text: titleText
				               },
							   tooltip: {},
				               legend: {
				                   data:['汽油', '柴油']
				               },
				               xAxis: {
				                   data: xAxisData
				               },
							   yAxis: {},
				               series: [{
				                   name: '汽油',
				                   type: 'bar',
				                   data: data0
				               }, {
				                   name: '柴油',
				                   type: 'bar',
				                   data: data1
				               }]
							   
						}
						// 使用刚指定的配置项和数据显示图表。
				        myChart.setOption(option);
				        window.addEventListener("resize", function () {
				            myChart.resize();
				        });
				        
					}else{
		        		layer.msg("/gas/homemain/staytimeGroupYearMonth初始化失败："+res.msg);
		        	}
				});
			}else if(id == 1){
				$("#echartsSpan0").css("background-color","white");
				$("#echartsSpan0").css("color","black");
				$("#echartsSpan1").css("background-color","blue");
				$("#echartsSpan1").css("color","white");
				$("#echartsSpan2").css("background-color","white");
				$("#echartsSpan2").css("color","black");
				$("#echartsSpan3").css("background-color","white");
				$("#echartsSpan3").css("color","black");
				
				CoreUtil.sendPost("/gas/homemain/saleGroupYearMonth", null, function (res) {
					if (res.code == '0') {
						var _data = res.data;
						var data0 = _data[0];
	        			var xAxisData = _data[1];
	        			var titleText = _data[2];
	        			
	        			if(CoreUtil.isEmpty(data0)){
	        				layer.msg(titleText + "暂无数据！");
	        				return false;
	        			}
	        			
						var option = {
				               title: {
				                   text: titleText
				               },
				               legend: {
				                   
				            	   data:[]
				               },
				               xAxis: {
				            	   type: 'category',
				            	   data: xAxisData
				               },
							   yAxis: {
								   type: 'value'
							   },
				               series: [{
				                   type: 'line',
				                   data: data0
				               }]
							   
						}
						// 使用刚指定的配置项和数据显示图表。
				        myChart.setOption(option);
				        window.addEventListener("resize", function () {
				            myChart.resize();
				        });
				        
					}else{
		        		layer.msg("/gas/staytime/paytaxGroupYearMonth初始化失败："+res.msg);
		        	}
				});
				
			}else if(id == 2){
				$("#echartsSpan0").css("background-color","white");
				$("#echartsSpan0").css("color","black");
				$("#echartsSpan1").css("background-color","white");
				$("#echartsSpan1").css("color","black");
				$("#echartsSpan2").css("background-color","blue");
				$("#echartsSpan2").css("color","white");
				$("#echartsSpan3").css("background-color","white");
				$("#echartsSpan3").css("color","black");
				
				CoreUtil.sendPost("/gas/homemain/declaretaxGroupYearMonth", null, function (res) {
					if (res.code == '0') {
						var _data = res.data;
						var data0 = _data[0];
	        			var xAxisData = _data[1];
	        			var titleText = _data[2];
	        			
	        			if(CoreUtil.isEmpty(data0)){
	        				layer.msg(titleText + "暂无数据！");
	        				return false;
	        			}
	        			
						var option = {
				               title: {
				                   text: titleText
				               },
							   tooltip: {},
				               xAxis: {
				                   data: xAxisData
				               },
							   yAxis: {},
				               series: [{
				                   name: '申报额',
				                   type: 'line',
				                   data: data0
				               }]
							   
						}
						// 使用刚指定的配置项和数据显示图表。
				        myChart.setOption(option);
				        window.addEventListener("resize", function () {
				            myChart.resize();
				        });
				        
					}else{
		        		layer.msg("/gas/staytime/declaretaxGroupYearMonth初始化失败："+res.msg);
		        	}
				});
				
				
			}else if(id == 3){
				$("#echartsSpan0").css("background-color","white");
				$("#echartsSpan0").css("color","black");
				$("#echartsSpan1").css("background-color","white");
				$("#echartsSpan1").css("color","black");
				$("#echartsSpan2").css("background-color","white");
				$("#echartsSpan2").css("color","black");
				$("#echartsSpan3").css("background-color","blue");
				$("#echartsSpan3").css("color","white");
				
			}else{
				
			}
		}
		
	</script>


</body>
</html>